<template>
  <div class="echartsDraw">
    <BlockBox width="48%" height="48%">
      <template #title>折线图 动态数据和时间轴</template>
      <template #content>
        <div id="lineChart" class=box_content></div>
      </template>
    </BlockBox>
    <BlockBox width="48%" height="48%">
      <template #title>柱状图</template>
      <template #content>
        <div id="barChart"></div>
      </template>
    </BlockBox>
    <BlockBox width="48%" height="48%">
      <template #title>饼图</template>
      <template #content>
        <div id="pieChart"></div>
      </template>
    </BlockBox>
    <BlockBox width="48%" height="48%">
      <template #title>散点图</template>
      <template #content>
        <div id="scatterPlot"></div>
      </template>
    </BlockBox>
  </div>
</template>

<script setup>
import BlockBox from "@/components/BlockBox";
import {onMounted} from "vue";
import * as echarts from "echarts";

// 折线面积图
const drawLineChart = () => {
  let chartDom = document.getElementById('lineChart')
  let myChart = echarts.init(chartDom)

  var emailData = [400, 132, 101, 134, 90, 400, 210]
  var adsData = [220, 182, 200, 234, 290, 330, 310]
  var seriesData = emailData.map(function (value, index) {
    if (adsData[index] && (value > adsData[index])) {
      return {
        value: value,
        itemStyle: {
          color: '#ff0000'
        }
      }
    }
    return  value
  })

  let option = {
    title: {
      text: 'Stacked Area Chart'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        // stack: 'Total',
        // areaStyle: {},
        // emphasis: {
        //   focus: 'series'
        // },
        data: seriesData,
        symbolSize: 8 // 拐点的大小
      },
      {
        name: 'Union Ads',
        type: 'line',
        // stack: 'Total',
        // areaStyle: {},
        // emphasis: {
        //   focus: 'series'
        // },
        data: adsData
      },
      {
        name: 'Video Ads',
        type: 'line',
        // stack: 'Total',
        // areaStyle: {},
        // emphasis: {
        //   focus: 'series'
        // },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
    ]
  }

  option && myChart.setOption(option)
  window.addEventListener("resize", () => {
    if (myChart) myChart.resize()
  })
}
// 柱状图
const drawBarChart = () => {
  let chartDom = document.getElementById('barChart')
  let myChart = echarts.init(chartDom)

  let option = {
    title: {
      text: 'World Population'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        data: [18203, 23489, 29034, 104970, 131744, 630230]
      },
      {
        name: '2012',
        type: 'bar',
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
    ]
  }

  option && myChart.setOption(option)

  myChart.on('click', function(params) {
    // 控制台打印数据的名称
    console.log('点击柱状图', params);
  });
  window.addEventListener("resize", () => {
    if (myChart) myChart.resize()
  })
}
// 饼图
const drawPieChart = () => {
  let chartDom = document.getElementById('pieChart')
  let myChart = echarts.init(chartDom)

  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '0%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' }
        ]
      }
    ]
  }

  option && myChart.setOption(option)

  myChart.on('click', function(params) {
    // 控制台打印数据的名称
    console.log('点击饼图', params);
  });
  window.addEventListener("resize", () => {
    if (myChart) myChart.resize()
  })
}
// 散点图
const drawScatterPlot = () => {
  let chartDom = document.getElementById('scatterPlot')
  let myChart = echarts.init(chartDom)

  let option = {
    xAxis: {},
    yAxis: {},
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        symbolSize: 20,
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],
        type: 'scatter'
      }
    ]
  }

  option && myChart.setOption(option)

  myChart.on('click', function(params) {
    // 控制台打印数据的名称
    console.log('点击散点图', params);
  });
  window.addEventListener("resize", () => {
    if (myChart) myChart.resize()
  })
}
onMounted(() => {
  drawLineChart()
  drawBarChart()
  drawPieChart()
  drawScatterPlot()
})
</script>

<style scoped lang="less">
.echartsDraw {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box_content {
  width: 100%;
  height: 100%;
}
#pieChart, #barChart, #scatterPlot {
  width: 100%;
  height: 100%;
}
</style>